<template>
	<view class="page">
		<v-header title="企业管理员用户信息" @click-left="$back()"></v-header>
		<view class="layout" :style="{ marginTop: h + 'px' }">
			<view class="loginBox">
				<view class="f cell">
					<text class="requierText">*</text>
					<label class="label phone"></label>
					<input class="fl" type="number" v-model="addquery.phone" placeholder="请输入企业管理员手机号" maxlength="30" />
				</view>
				<view class="f cell">
					<text class="requierText">*</text>
					<label class="label yzm1"></label>
					<input class="fl" type="number" v-model="addquery.yzm" placeholder="请输入验证码" maxlength="30" />
					<button class="vcBtn" @tap="sendSmsMessage" :disabled="disabled">{{ time }}</button>
				</view>
				<view class="f cell">
					<text class="requierText">*</text>
					<label class="label name"></label>
					<input class="fl" type="text" v-model="addquery.account" placeholder="请输入企业管理员账号" maxlength="30" />
				</view>
				<view class="f cell">
					<text class="requierText">*</text>
					<label class="label pwd"></label>
					<input class="fl" type="password" v-model="addquery.password" placeholder="请输入企业管理员密码" maxlength="20" />
				</view>
				<view class="f cell">
					<text class="requierText">*</text>
					<label class="label accoint"></label>
					<input class="fl" type="text" v-model="addquery.name" placeholder="请输入企业管理员名称" maxlength="20" />
				</view>
				<view class="f cell">
					<text class="requierText"></text>
					<label class="label name"></label>
					<input class="fl" type="text" v-model="addquery.jname" placeholder="请输入企业管理员简称" maxlength="20" />
				</view>
				<view class="f cell">
					<text class="requierText"></text>
					<label class="label sex"></label>
					<picker @change="selectChange($event, 'status')" class="picker fl" :value="sexIndex" :range="sexArray" range-key="value">
						<input :value="sexArray[sexIndex].value" disabled placeholder="请选择性别" />
					</picker>
					<text class="cuIcon-right"></text>
				</view>
				<view class="f cell">
					<text class="requierText"></text>
					<label class="label email"></label>
					<input class="fl" type="text" v-model="addquery.email" placeholder="请输入邮箱" maxlength="20" />
				</view>
				<view class="cu-btn block round login" @tap="nextStep">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: this.$h,
			//参数
			addquery: {
				phone: '',
				yzm: '',
				account: '',
				password: '',
				name: '',
				jname: '',
				sex: '',
				email: ''
			},
			//性别
			sexIndex: -1,
			sexArray: [
				{
					code: 0,
					value: '男'
				},
				{
					code: 1,
					value: '女'
				}
			],
			time: '获取验证码',
			disabled: false,
			currentTime: 60
		};
	},
	methods: {
		//获取验证码
		sendSmsMessage() {
			let _this = this;
			if (!_this.addquery.phone) {
				uni.showToast({ title: '请输入手机号码', icon: 'none' });
				return false;
			} else if (!/^1[345789]\d{9}$/.test(_this.addquery.phone)) {
				uni.showToast({ title: '手机号码格式不正确', icon: 'none' });
				return false;
			}
			_this.getCode();
			_this.disabled = true;
			//请求验证码接口
			// let loginParams = {phoneNumber: _this.phoneNumber}
			// _this.$util.requestPub(_this.ServerUrl +"/sendSmsMessage", loginParams, "GET", d=> {
			// 	if (d.data.code == 200) {
			// 		uni.showToast({title: '发送成功',icon: 'none'});
			// 	} else {
			// 		if(d.data.msg){
			// 			uni.showToast({title: d.data.msg,icon: 'none'});
			// 		}else{
			// 			uni.showToast({title: '发送失败，请重试。',icon: 'none'});
			// 		}

			// 	}
			// }, null, res => {
			// 	uni.hideLoading()
			// });
		},
		//切换验证码状态
		getCode() {
			let _this = this;
			let currTime = _this.currentTime;
			let interval = setInterval(() => {
				currTime--;
				_this.time = currTime + ' s';
				if (currTime <= 0) {
					clearInterval(interval);
					_this.time = '重新发送';
					currTime = _this.currentTime;
					_this.disabled = false;
				}
			}, 800);
		},
		//下一步
		nextStep() {
			this.validatePhone();
		},
		//选择性别
		selectChange(e, type) {
			let than = this;
			let index = e.target.value;
			if (type == 'status') {
				//隐患状态
				if (index >= 0) {
					than.sexIndex = index;
					than.addquery.sex = than.sexArray[index].code;
				}
			}
		},
		//验证格式
		validatePhone() {
			let than = this;
			let phone = than.addquery.phone || '';
			let yzm = than.addquery.yzm || '';
			let account = than.addquery.account || '';
			let password = than.addquery.password || '';
			let name = than.addquery.name || '';
			let jname = than.addquery.jname || '';
			let sex = than.addquery.sex || '';
			let email = than.addquery.email || '';
			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
			var reg = new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'); //正则表达式
			if (!phone || phone == '') {
				uni.showToast({ title: '请输入企业管理员手机号', icon: 'none' });
				return false;
			} else if (phone.length != 11) {
				uni.showToast({ title: '请输入有效的手机号码', icon: 'none' });
				return false;
			} else if (!myreg.test(phone)) {
				uni.showToast({ title: '请输入有效的手机号码', icon: 'none' });
				return false;
			} else if (!yzm || yzm == '') {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return false;
			} else if (yzm.length < 6) {
				uni.showToast({ title: '验证码格式不正确', icon: 'none' });
				return false;
			} else if (!account || account == '') {
				uni.showToast({ title: '请输入企业管理员账号', icon: 'none' });
				return false;
			} else if (!password || password == '') {
				uni.showToast({ title: '请输入企业管理员密码', icon: 'none' });
				return false;
			} else if (!name || name == '') {
				uni.showToast({ title: '请输入企业管理员名称', icon: 'none' });
				return false;
			} else if (email.length > 0) {
				if (!reg.test(email)) {
					uni.showToast({ title: '请输入有效邮箱地址', icon: 'none' });
					return false;
				}
			} else {
				uni.navigateTo({
					url: '../../views/login/enterpriseInfo'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/style/login.scss';
.cuIcon-right {
	width: 40rpx;
}
.vcBtn {
	height: 60rpx;
	margin: 0;
	line-height: 60rpx;
	font-size: 26rpx;
	padding: 0 16rpx;
	color: #fff;
	background: $color;
	border: none;
	&:after {
		border: none !important;
	}
}
</style>
